<template>
  <div class="content">
    <div class="gallery-book_title">
      <span style="margin-left: 30px">{{ this.sortTitle }}</span>
           <router-link :to="{path: '/book_list',query:{id:this.ID}}" style="float: right;margin-right: 30px">>更多图书</router-link>
    </div>
    <div class="gallery-book_list">
      <div
        class="gallery-book_card"
        v-for="item in bookSortList"
        :key="item.bookId"
      >
        <router-link :to="{path: '/book',query:{id:item.isbn}}" @click.native="dianji(item.bookId)">
        <el-image
          referrer="no-referrer|origin|unsafe-url"
          style="width: 82%; height: 190px;margin:5px 9%"
          :src=" item.img"
          fit="fill"
        ></el-image>
        <div style="width: 86%;margin: 0px 7%">
          <a href="#" class="gallery-book_text">
            {{ item.title }}
          </a>
          <div class="gallery-book_author">
            {{ item.author }}
          </div>
          <div class="gallery-book_price">
            <span style="font-size:14px;color: #bf7f5f;">￥</span>
            {{ item.price }}
          </div>
        </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
// import {reqGetRecBookList} from "../../api/book";
import axios from "axios";
export default {
  props: {
    listSort: {
      default: "",
    }
  },
  name: "RecBookBox",
  data() {
    return {
      sortTitle: "",
      bookSortList: [],
      ID:'',
      bookList: [],
    };
  },
  methods: {
       dianji(val){   //点击量
    let params = new URLSearchParams();
    params.append("bookId", val);
      axios.post('/fl-book/addBookHits',params).then((res)=>{
        
      })
    },
    getBookList() {
      switch (this.listSort) {
        case "recommend":
          this.sortTitle = "精品推荐";
          this.ID=4;

          this.getbook(this.ID,1,12);
          break;

        case "newProduct":
          this.sortTitle = "新品推荐";
          this.ID=41;
          this.getbook(this.ID,1,12);
          
          break;
        default:
          break;
      }
    },

    getbook(ID,page,pageSize) {
      axios
        .get("/fl-book/getCategoriesBooks", {
          params: {
            categoriesId: ID,
             page:page,
            pageSize: pageSize
          },
        })
        .then((res) => {
          this.bookSortList = res.data.data[1].records;
          // this.bookSortList=this.bookList.filter((item,index)=>
          // index<12&&index>=0
          // )
        });
    },

  },
  created() {
    this.getBookList();
  },
};
</script>

<style scoped>
.content {
  width: 1240px;
  margin: 0 auto;
  
}
.gallery-book_title {
  padding-top: 20px;
  width: 100%;
  height: 32px;
  margin-bottom: 25px;
  border-bottom: 1px solid #ccc;
  margin-top: 20px;
  padding-bottom: 34px;
  font-size: 24px;
}

.gallery-book_list {
  width: 100%;
 
}
.gallery-book_card {
  /* position: relative; */
  width: 12.28%;
  margin: 3px 1%;
  height: 290px;
  border: 1px solid #e4e4e4;
  display: inline-block;
  vertical-align: top;

}
.gallery-book_card:hover {
  border: 1px #d9d9d9 solid;
  box-shadow: 0px 0px 6px #9a9a9a;
}
.gallery-book_text {
  display: block;
  width: 100%;
  font-size: 12px;
  color: #333;
  word-break: break-all;
  max-height: 40px;
  line-height: 20px;
  overflow: hidden;
  margin: 0 auto;
}
.gallery-book_author {
  width: 98px;
  height: 22px;
  overflow: hidden;
  margin: 0;
  color: #999;
  font-size: 12px;
}
.gallery-book_price {
  float: left;
  font-style: normal;
  margin-right: 3px;
}
.gallery-book {
  width: 100%;
  font-family: 微软雅黑;
}
a {
  font-size: 16px;
  text-decoration: none;
  color: #333333;
}

deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}
deep .el-tabs__nav {
  width: 100%;
  margin: 0px auto;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter {
  opacity: 0;
}
</style>
